<template>
    <div class="not-found-container">
      <div class="not-found-content">
        <div class="error-code">404</div>
        <div class="error-message">页面不存在或已删除</div>
        <div class="error-desc">
          您访问的页面可能已被移除、暂时不可用或地址输入错误
        </div>
        
        <div class="suggestions">
          <h3>您可以尝试以下操作：</h3>
          <ul>
            <li>检查您输入的URL是否正确</li>
            <li>返回<a href="/" @click.prevent="goHome">首页</a></li>
            <li>浏览我们的<a href="#" @click.prevent="showPopularLinks">热门页面</a></li>
            <li>联系<a href="#" @click.prevent="showContact">客服支持</a></li>
          </ul>
        </div>
        
        <div class="action-buttons">
          <el-button type="primary" @click="goHome" round>
            <el-icon><HomeFilled /></el-icon>
            返回首页
          </el-button>
          <el-button @click="goBack" round>
            <el-icon><ArrowLeft /></el-icon>
            返回上一页
          </el-button>
        </div>
        
        <div class="popular-links" v-if="showLinks">
          <h4>热门页面：</h4>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(link, index) in popularLinks" :key="index">
              <el-card shadow="hover" class="link-card" @click="navigateTo(link.path)">
                <div class="link-icon">
                  <component :is="link.icon" />
                </div>
                <div class="link-title">{{ link.title }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { 
    HomeFilled, 
    ArrowLeft,
    User,
    ShoppingCart,
    Document,
    Setting,
    DataAnalysis,
    ChatLineRound
  } from '@element-plus/icons-vue'
  
  const router = useRouter()
  const showLinks = ref(false)
  
  // 静态数据 - 热门链接
  const popularLinks = ref([
    { title: '用户中心', path: '/user', icon: User },
    { title: '产品服务', path: '/products', icon: ShoppingCart },
    { title: '帮助文档', path: '/docs', icon: Document },
    { title: '系统设置', path: '/settings', icon: Setting },
    { title: '数据分析', path: '/analytics', icon: DataAnalysis },
    { title: '在线客服', path: '/support', icon: ChatLineRound }
  ])
  
  // 返回首页
  const goHome = () => {
    router.push('/')
  }
  
  // 返回上一页
  const goBack = () => {
    router.go(-1)
  }
  
  // 显示热门链接
  const showPopularLinks = () => {
    showLinks.value = !showLinks.value
  }
  
  // 显示联系方式
  const showContact = () => {
    ElMessage({
      message: '客服电话：400-123-4567（工作日 9:00-18:00）',
      type: 'info',
      duration: 5000
    })
  }
  
  // 导航到指定页面
  const navigateTo = (path) => {
    router.push(path)
  }
  </script>
  
  <style scoped>
  .not-found-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding: 20px;
  }
  
  .not-found-content {
    max-width: 800px;
    text-align: center;
    padding: 40px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .error-code {
    font-size: 120px;
    font-weight: bold;
    color: #f56c6c;
    line-height: 1;
    margin-bottom: 20px;
  }
  
  .error-message {
    font-size: 24px;
    color: #303133;
    margin-bottom: 10px;
  }
  
  .error-desc {
    font-size: 16px;
    color: #606266;
    margin-bottom: 30px;
  }
  
  .suggestions {
    text-align: left;
    margin: 30px auto;
    max-width: 500px;
  }
  
  .suggestions h3 {
    color: #303133;
    margin-bottom: 15px;
  }
  
  .suggestions ul {
    list-style-type: none;
    padding-left: 20px;
  }
  
  .suggestions li {
    margin-bottom: 10px;
    color: #606266;
  }
  
  .suggestions a {
    color: #409eff;
    text-decoration: none;
    margin: 0 5px;
  }
  
  .suggestions a:hover {
    text-decoration: underline;
  }
  
  .action-buttons {
    margin: 30px 0;
  }
  
  .action-buttons .el-button {
    margin: 0 10px;
    padding: 12px 24px;
  }
  
  .popular-links {
    margin-top: 40px;
    text-align: left;
  }
  
  .popular-links h4 {
    color: #303133;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .link-card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .link-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  }
  
  .link-icon {
    font-size: 36px;
    color: #409eff;
    margin-bottom: 10px;
  }
  
  .link-title {
    font-size: 16px;
    color: #606266;
  }
  
  @media (max-width: 768px) {
    .error-code {
      font-size: 80px;
    }
    
    .error-message {
      font-size: 20px;
    }
    
    .not-found-content {
      padding: 20px;
    }
    
    .action-buttons .el-button {
      display: block;
      width: 100%;
      margin: 10px 0;
    }
    
    .el-col {
      margin-bottom: 15px;
    }
  }
  </style>